<template>
    <div class="basic-from">
        <div class="card-box">
            <el-form ref="propForm" :model="message" class="form-wrap" size="small">
                <el-form-item label="消息标题">
                    <el-col class="in_txt">{{message.messageHeader}}</el-col>
                </el-form-item>
                <el-form-item label="消息内容">
                    <el-col class="in_txt">{{message.msgContent}}</el-col>
                </el-form-item>
                <el-form-item label="消息类型">
                    <el-col class="in_txt">
                        <span v-if="message.messageType === '0'" class="messageType">普通</span>
                        <span v-else class="messageType messageTypeTwo">紧急</span>
                    </el-col>
                </el-form-item>
                <el-form-item label="创建人">
                    <el-col class="in_txt">{{message.createName}}</el-col>
                </el-form-item>
                <el-form-item label="创建日期">
                    <el-col class="in_txt">{{message.createTime}}</el-col>
                </el-form-item>
            </el-form>
				</div>
				<div class="card-box">
            <el-button class="shut-down" @click="handleShutDownClick">关闭</el-button>
        </div>
    </div>
</template>

<script>
	import {getSysInfoByMsgId, getSysInfoNum} from '../api/message'
export default {
    name: "message-details",
    data() {
        return {
            message: {},
            msgId: ''
        }
    },
    watch: {
        '$route.query.msgId'(val){
            this.handleObtain()
        }
    },
    methods: {
        handleObtain() {
            getSysInfoByMsgId(this.$route.query.msgId).then(res => {
                if (res.data.code === 0) {
                    this.message = res.data.data
                }
            })
        },
        handleShutDownClick() {
            this.$store.commit("delHistoryRoute", this.$route.fullPath)
						this.handleMessagesTotal()
            this.$router.go(-1)
        },
				handleMessagesTotal() {
					getSysInfoNum().then(res => {
						if (res.data.code === 0) {
							this.messagesTotal = res.data.data
							this.$store.commit('changeMessagesTotal', res.data.data)
						}
					})
				},
    },
    mounted() {
        this.msgId = this.$route.query.msgId
        this.handleObtain()
    }
}
</script>

<style scoped lang="scss">
	.card-box {
		overflow: hidden;
		margin: 24px;
		.in_txt {
			color: #999;
		}
		.messageType {
			line-height: 1.2;
			font-size: 85%;
			padding: .25em .4em;
			background-color: #1563D1;
			color: #fff;
		}
		.messageTypeTwo {
			background-color: #dc3545;
		}
		.shut-down {
			float: right;
			margin-right: 10px;
		}
	}
</style>
